window.addEventListener("scroll",()=>{
const header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
Sé sobre el método .toggle() pero no tan claramente. ¿Podría alguien explicar acerca de toggle() y window.scrollY?
Desplácese hacia abajo. La propiedad scrollY de la interfaz de la ventana devuelve el número de píxeles que el documento se desplaza verticalmente actualmente.
window.addEventListener("scroll", (event) => {
document.querySelector("h1").textContent = this.scrollY;
document.querySelector("h2").textContent = ("sticky", window.scrollY > 0);
})
body {
width: 100vw;
height: 400vh;
}
h1 {
position: fixed;
top: 0;
}
h2 {
position: fixed;
top: 20%;
}
<h1>0</h1>
<h2></h2>